<template>
   <div id="app">
      <div class="box">
         <div class="box_wrapper">
            <h1>UNI-ADMIN</h1>
            <el-form label-width="80px">
               <el-input v-model="username" placeholder="请输入用户名"></el-input>
               <el-input v-model="password" placeholder="请输入密码"></el-input>
            </el-form>
         </div>
         <el-button type="success" @click="onClick">立即登录</el-button>
      </div>
   </div>
</template>

<script>
   export default {
      data() {
         return {
            username: '',// 输入框
            password: '',// 输入框
         }
      },
      mounted() {

      },
      methods: {
         onClick() {
            this.$axios.post('http://ceshi5.dishait.cn/admin/login', {
               username: this.username,
               password: this.password
            }).then((res) => {
               // console.log(res)
               let token = res.data.data.token;
               window.localStorage.setItem("token", token);
               this.$message('登陆成功，页面还有3秒到达战场');
               setTimeout(() => {
                  this.$router.push("/");
               }, 3000)
            }).catch((error) => {
               this.$message.error('登录失败');
               // console.log(error)
            })
         }
      }
   }
</script>

<style lang="scss" scoped>
   * {
      margin: 0;
      padding: 0;
   }

   #app {
      .box {
         width: 450px;
         height: 320px;
         margin: 150px auto;
         padding: 20px;
         border: 2px solid gray;

         .box_wrapper {
            text-align: center;

            h1 {
               width: 100%;
               height: 50px;
               line-height: 50px;
               border-bottom: 1px solid black;
            }

            .el-form {
               display: flex;
               flex-direction: column;
               flex-wrap: wrap;
               line-height: 80px;
               margin-top: 20px;

            }
         }

         .el-button {
            width: 100%;
            margin-top: 15px;
            height: 40px;
            line-height: 40px;
         }
      }
   }
</style>